<template>
  <view class="content">
		<u-navbar placeholder fixed rightText="搜索">
			<view class="left" slot="left">
				 <my-scanCode />
			</view>
			<view class="center" slot="center">
				<u-search shape="round" @click="clickInput" :showAction="false" disabled></u-search>
			</view>
		</u-navbar>
    <u-sticky bgColor="#fff">
      <u-tabs :list="allchannels" @tap="clickTabs" current="1">
        <view slot="right" style="padding-right: 10px" @tap="showChannel = true" >
					<u-icon name="list" size="21" bold></u-icon >
				</view>
      </u-tabs>
    </u-sticky>
		
		<ArticleList :config="config" :data="articleList"/>
		
    <u-popup :show="showChannel" @close="showChannel = false"  @open="showChannel = true" round="8" >
      <channel @close="showChannel = false" />
    </u-popup>
    <my-tabbar name="home" />
  </view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import { getArticleList } from '@/api/article'
	import { getStorage } from '@/utils/storage.js'
	import { getChannels, getUserChannels } from '@/api/home'
import channel from "@/pages/index/channel.vue";
import ArticleList from '@/pages/index/Article-item.vue'
export default {
  data() {
    return {
      title: "Hello",
      showChannel: false,
			config: {
			  showAuthorName: true,
			  showRead: true,
			  // showAvatar: true
			  one: true,
			  two: true,
			  three: true,
			  zero: true,
			  showTime: true,
			},
			articleList: [],
			allchannels: [],//所有频道
			userChannels: [],//用户频道
    };
  },
  onLoad() {
	},
  components: {
    channel,ArticleList
  },
	computed: {
	  ...mapGetters(['token'])
	},
	created () {
	  this.getAllChannels()
	  this.getUserChannels()
	  this.getArticleList()
	},
  methods: {
		// 获取所有频道数据
		async getAllChannels () {
		  this.allchannels = await getChannels().data
			console.log(this.allchannels);
		},
		// 获取用户频道
		async getUserChannels () {
		  let channels = []
		  if (this.token) {
		    // 用户登录了 请求获取线上的数据
		    this.allchannels = await getUserChannels().data
		  } else {
		    // 没有登录 , 判断是否有本地存储的频道数据
		    const localChannels = getStorage('user-channels')
		    // 如果有本地数据 则 使用
		    if (localChannels) {
		      channels = localChannels
		    } else {
		      // 用户没有登录，也没有本地存储的频道，那就请求获取默认推荐的列表
		      this.allchannels = await getUserChannels().data
		    }
		  }
		  this.userChannels = channels
		},
		// 获取文章列表
		async getArticleList () {
		  const res = await getArticleList({ pageNum: 1, pageSize: 10 })
		  this.articleList = res
		},
		//点击频道
    clickTabs(item) {
      console.log("item", item);
    },
    tapRight() {
      this.$u.toast("点击搜索");
    },
    clickInput() {
      uni.navigateTo({
        url: "/pages/search/index",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  // padding: 0px 10px;
}
.icon-saoyisao {
  font-size: 20px;
}
/* 	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	} */
	
	
	/deep/.center{
		width: 75%;
		// flex: 2;
	}
</style>
